<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-clip: #bfa;
            /* 渐变可以设置复杂的背景颜色
                渐变是图片 ！！！需要用background-image
                线性渐变  颜色沿着一条直线发生变化
                liner-gradient()

                liner-grandient(red, yellow)红色在开头 黄色在结尾
                在开头可以指定渐变的方向
                to left
                to right
                to botttom
                to top
                deg deg代表度数
                turn 表示圈
                to top left 左上

                repeating-liner-grandient()可以平铺渐变
                 */
                 /* background-image: linear-gradient(red, yellow); */
                 background-image: linear-gradient(to right, red, yellow,#bfa);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>